<style lang="less">
    @import './style.less';
</style>

<template>
    <div class="document">
        <div class="op-header">
            <el-button
                class="add"
                size="small"
                type="info"
                @click="add">

                <i class="el-icon-circle-plus icon-right" />新增文档
            </el-button>
            <div class="search">
                <el-cascader
                    class="enable-select"
                    :clearable="true"
                    v-model="enableValue"
                    :options="enableOptions"
                    :props="cascaderProps"
                    placeholder="启用状态"/>
                <el-cascader
                    class="department-select"
                    :clearable="true"
                    v-model="documentValue"
                    :options="classDucument"
                    :props="cascaderProps"
                    placeholder="全部分类"/>
                <el-input
                    class="search-input "
                    size="small"
                    v-model="searchInput"
                    placeholder="请输入查询关键字"
                    prefix-icon="el-icon-search" />
                <el-button
                    class="search-button"
                    size="small"
                    type="primary"
                    @click="search">

                    <i class="el-icon-search icon-right" />查询
                </el-button>
            </div>
        </div>
        <table-ex
            :rows="documents"
            :total="documentsTotal"
            :columns="columns"
            :options="options"
            :on-option="onClickOption"
            :on-operation="onClickOperation"
            :on-page-change="onPageChange"/>
        <dialog-ex
            v-if="!!dialogModal"
            :title="this.dialogModal === 'add' ? '新增文档' : '编辑文档'"
            :form="form"
            :mode="dialogModal"
            :init="currentDocument"
            :uploadParams="uploadParams"
            :ctrl-values="classDucument"/>
    </div>
</template>

<script>

    import { mapGetters, mapActions, mapMutations } from 'vuex'
    import { deepCopy } from '@/utils/util'
    import pageConfig from './config'
    
    import tableEx from '@/components/table/tableEx'
    import dialogEx from '@/components/dialog/dialogEx'

    export default {
        name: 'document',
        components: {
            'table-ex': tableEx,
            'dialog-ex': dialogEx
        },
        data() {
            return {
                searchInput: '',
                enableValue: [],
                documentValue: [],
                dialogModal: '',
                currentDocument: null,
                uploadParams: {
                    purpose: 'document',
                    ownerId: 0,
                    sequence: 1
                },
                cascaderProps: {
                    value: 'id', 
                    label: 'name',
                    children: 'subClasses'
                },
                enableOptions: pageConfig.enableOptions,
                columns: pageConfig.columns,
                options: pageConfig.options,
                form: {
                    items: pageConfig.formItems,
                    actions: {
                        cancel: () => {
                            this.dialogModal = ''
                        },
                        confirm: (data, mode) => {
                            console.log(data)
                            this.dialogModal = ''
                            if (mode === 'edit') {
                                this.editDocument(data)
                            } else {
                                this.addDocument(data)
                            }
                        }
                    }
                }
            }
        },

        /**
         * 生命钩子
         **/
        created() {
            this.loadData()
        },
        mounted() {},

        /**
         * 计算
         **/
        computed: {
            ...mapGetters({
                documents: 'documents',
                documentsTotal: 'documentsTotal',
                classDucument: 'classDucument'
            })
        },
        /**
         * 监控
         **/
        watch: {},

        /**
         * 事件
         **/
        methods: {

            ...mapActions([
                'getDocuments',
                'removeDocument',
                'addDocument',
                'editDocument',
                'getClassDocument'
            ]),
            ...mapMutations([
                'SETDOCUMENTPAGE'
            ]),

            loadData() {
                this.getDocuments()
                this.getClassDocument({
                    class_type: 'key_class_knowledge'
                })
            },

            add() {
                this.dialogModal = 'add'
            },

            search() {
                const filter = {
                    title: this.searchInput ? this.searchInput : null,
                    categoryId: !!this.documentValue ? this.documentValue[0] : null,
                    enabled: !!this.enableValue ? this.enableValue[0] : null
                }
                this.SETDOCUMENTPAGE({
                    number: 1,
                    filter
                })
                this.getDocuments()
            },

            batchOption() {},

            onClickOption(option, rows) {
                if (option === 'batchrefresh') {
                    this.loadData()
                } else {
                    let lIds = rows.map(item => { return item.id })
                    this.removeDocument({ lIds })
                }
            },

            onClickOperation(oper, row) {
                if (oper.prop === 'edit') {
                    let temp = deepCopy(row)
                    temp.categoryId = [temp.categoryId]
                    this.currentDocument = temp
                    this.dialogModal = 'edit'
                } else if (oper.prop === 'delete') {
                    let params = {
                        "lIds": [row.id]
                    }
                    this.removeDocument(params)
                }
            },

            onPageChange(number) {
                this.SETDOCUMENTPAGE({ number })
                this.getDocuments()
            }
        },
    }
</script>

